<template>
  <v-app>
    <v-main>
      <v-container fluid class="fill-height">
        <v-row justify="center" align="center" class="fill-height">
          <v-col cols="12" sm="8" md="6" class="text-center">
            <div class="error-content">
              <!-- 404 图标 -->
              <div class="error-icon mb-6">
                <v-icon size="120" color="primary" class="floating">
                  mdi-map-marker-question
                </v-icon>
              </div>
              
              <!-- 错误代码 -->
              <h1 class="error-code">404</h1>
              
              <!-- 错误信息 -->
              <h2 class="text-h4 font-weight-bold mb-4">页面未找到</h2>
              <p class="text-body-1 text-medium-emphasis mb-6">
                抱歉，您访问的页面不存在或已被移动。<br>
                请检查URL是否正确，或返回首页继续浏览。
              </p>
              
              <!-- 操作按钮 -->
              <div class="action-buttons">
                <v-btn
                  color="primary"
                  size="large"
                  prepend-icon="mdi-home"
                  @click="goHome"
                  class="me-4 mb-2"
                >
                  返回首页
                </v-btn>
                
                <v-btn
                  variant="outlined"
                  size="large"
                  prepend-icon="mdi-arrow-left"
                  @click="goBack"
                  class="mb-2"
                >
                  返回上页
                </v-btn>
              </div>
              
              <!-- 帮助链接 -->
              <div class="help-links mt-8">
                <p class="text-body-2 text-medium-emphasis mb-4">您可能需要：</p>
                <v-chip-group>
                  <v-chip
                    v-for="link in helpLinks"
                    :key="link.path"
                    :to="link.path"
                    variant="outlined"
                    prepend-icon="link.icon"
                    class="ma-1"
                  >
                    {{ link.title }}
                  </v-chip>
                </v-chip-group>
              </div>
            </div>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'

const router = useRouter()
const authStore = useAuthStore()

// 计算属性
const helpLinks = computed(() => {
  const role = authStore.userRole
  
  const commonLinks = [
    { title: '个人资料', path: '/profile', icon: 'mdi-account' }
  ]
  
  const roleLinks = {
    admin: [
      { title: '管理仪表盘', path: '/admin/dashboard', icon: 'mdi-view-dashboard' },
      { title: '班级管理', path: '/admin/classes', icon: 'mdi-school' },
      { title: '学生管理', path: '/admin/students', icon: 'mdi-account-group' }
    ],
    teacher: [
      { title: '教师工作台', path: '/teacher/dashboard', icon: 'mdi-view-dashboard' },
      { title: '入园管理', path: '/teacher/arrival', icon: 'mdi-clock-in' },
      { title: '离园管理', path: '/teacher/departure', icon: 'mdi-clock-out' }
    ],
    driver: [
      { title: '离园管理', path: '/driver/departure', icon: 'mdi-clock-out' }
    ]
  }
  
  return [...(roleLinks[role] || []), ...commonLinks]
})

// 方法
const goHome = () => {
  const role = authStore.userRole
  
  if (role === 'admin') {
    router.push('/admin/dashboard')
  } else if (role === 'teacher') {
    router.push('/teacher/dashboard')
  } else if (role === 'driver') {
    router.push('/driver/departure')
  } else {
    router.push('/login')
  }
}

const goBack = () => {
  if (window.history.length > 1) {
    router.go(-1)
  } else {
    goHome()
  }
}
</script>

<style scoped>
.fill-height {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.error-content {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.error-code {
  font-size: 6rem;
  font-weight: 900;
  color: rgba(var(--v-theme-primary), 0.8);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 1rem;
  animation: pulse 2s ease-in-out infinite;
}

.error-icon {
  animation: bounce 2s ease-in-out infinite;
}

.floating {
  animation: float 3s ease-in-out infinite;
}

.action-buttons {
  margin: 2rem 0;
}

.help-links {
  padding-top: 2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* 动画效果 */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* 响应式设计 */
@media (max-width: 600px) {
  .error-content {
    margin: 1rem;
    padding: 1.5rem;
  }
  
  .error-code {
    font-size: 4rem;
  }
  
  .v-icon {
    font-size: 80px !important;
  }
  
  .action-buttons .v-btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

/* 深色主题适配 */
.v-theme--dark .error-content {
  background: rgba(33, 33, 33, 0.95);
  color: white;
}

.v-theme--dark .help-links {
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* 入场动画 */
.error-content {
  animation: slideUp 0.6s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 芯片悬停效果 */
.v-chip {
  transition: all 0.3s ease;
}

.v-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
</style>
